<template>
<div class="box">
    <div class="left">
        <div class="img_box">
            <img :src=sss.avatar alt="">
        </div>
            <div style="margin-bottom:50px">{{sss.nickname}}</div>
        <div class="ulli">
            <ul>
                <li tabindex="1" @click="toUser" ref="userCenter">个人中心</li>
                <li tabindex="1" @click="toStore" ref="pointStore">积分商城</li>
                <li @click="toLogin">退出</li>
            </ul>
        </div>
    </div>
    <div class="right">
        <router-view>
        </router-view>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
// import {mapMutations} from 'vuex'
    
  export default {
      name:'user',
    data() {
      return {
        // form: {
        //   name: '',
        //   gender: '',
        //   age: '',
        //   school: '',
        // }
      }
    },
    created(){
        console.log(this.$store.state.userinfo.avatar);
    },
    computed:{
        ...mapState({
            'sss':state=>state.userinfo
        }),
        // ...mapMutations(['setUser']),
        // fun0(){
        //     this.setUser()
        // },

    },
    methods: 
    {
    
    toLogin(){
      localStorage.removeItem('temp');
      this.$router.push('/login')

    },
    toStore(){
       this.$router.push('/user/userstore')
    },
    toUser(){
        this.$router.push('/user/userhome')
       
    }
  }
  }
</script>

<style>
    .box{
        color: white;
    }
    .left{
        width: 300px;
        position: absolute;
        left:0;
        top: 0;
        bottom: 0;
        background-color: rgb(51, 51, 51);
    }

    .right{
        width: calc(100% - 300px);/* 实现100-300px效果 */
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;

    }
    .img_box img{
        width: 150px;
        height: 150px;
        border-radius: 100px;
        margin: 75px;
        margin-bottom: 20px;
        background-color: rosybrown;
    }
    .ulli ul{
        list-style: none;
        padding: 0;
    }
    li{
        padding: 15px;
    }
    li:focus{
        background-color: rgb(138, 0, 151);
    }
    
</style>